<template>
	<div class="index">
		<div class="top">
			<div class="content">
				<div class="left-content">
					<img
						src="../../assets/img/left-img.png"
						v-if="step1"
						alt
						style="width: 383px"
					/>
					<img
						v-else
						src="https://hzjt-ui-publiclib.oss-cn-beijing.aliyuncs.com/jijiasoft/jiamisuo.gif"
						alt
					/>
				</div>
				<div class="right-content">
					<div class="single" v-if="step1">
						<div
							class="title"
						>
							加密锁服务状态检查完毕
						</div>
						<!-- <div
							class="title textColor"
							v-if="
								sns.length > 0 &&
								sns.every((item) => item.status !== 1)
							"
						>
							加密锁服务状态检测异常
						</div> -->
						<div
							class="detail"
							v-for="(item, index) in sns"
							:key="index"
						>
							<icon-font
								type="icon-jiamisuo"
								class="icon-font"
							></icon-font>
							<span>
								加密锁序列号：{{ item.serial }}
							</span>
							<span v-if="item.status === 2">
								<span class="status-show warn">已挂失</span>
								<span class="status-show cancel" @click="cancelLoss(item)">取消挂失</span>
							</span>
							<span v-else-if="item.status === 98" class="status-show warn">无效锁</span>
							<span v-else-if="isNoresources(item.info.resource)" class="status-show warn">无可用资源</span>
							<span v-else-if="item.status === 1" class="status-show success">生效中</span>
						</div>
					</div>
					<div class="single error" v-if="!step1">
						<div class="title">
							正在检测加密锁服务状态
							<icon-font
								type="icon-querenshanchu"
								class="icon-font"
							></icon-font>
						</div>
						<span>请插入加密锁</span>
					</div>
					<!-- <div class="single error" v-if="!step1">
						<div class="title">
							正在检测设备状态
							<icon-font
								type="icon-querenshanchu"
								class="icon-font"
							></icon-font>
						</div>
						<span>检测中</span>
					</div> -->
				</div>
			</div>
		</div>
		<div class='bottom-line'>
				<div class="name">电脑名：{{ hostname }}</div>
				<div class="scroll-container" @click="toDetail('/user/help-center', '6')">
					<div class="scrolling-text">
						【重要提示】为保障加密锁稳定连接，避免屏幕关闭时掉线，点击此处查看解决方案 >>
					</div>
				</div>
			</div>
		<div class="bottom">
			<div
				:class="
					sns.some((item) => item.status === 1)
						? 'single'
						: 'single noClick'
				"
				@click="toDetail('/user/authorization')"
			>
				<img src="../../assets/img/authorization.png" alt />
				<span>我的授权</span>
			</div>
			<div
				:class="
					sns.some((item) => item.status === 1)
						? 'single'
						: 'single noClick'
				"
				@click="toDetail('/lock/serve')"
			>
				<img src="../../assets/img/lock-service.png" alt />
				<span>加密锁服务</span>
			</div>
			<div class="single" @click="toDetail('/user/help-center')">
				<img src="../../assets/img/help-center.png" alt />
				<span>帮助中心</span>
			</div>
			<div class="single" @click="toDetail('/user/call-center')">
				<img src="../../assets/img/service.png" alt />
				<span>客服中心</span>
			</div>
		</div>
		<userIndex v-model:visible="visible" @next="next"></userIndex>
		<bind-device
			v-model:visible="bindVisible"
			:data="dabangding"
		></bind-device>
		<report-for-loss v-model:visible="reportVisible" :serial="lossSerial" @updateSerial="updateSerial"></report-for-loss>
		<a-modal
      v-model:visible="writeErrorvisible"
      @ok="close"
      :closable="false"
      :footer="null"
      class="write-error"
    >
      <p class="text">
        加密锁
        {{
          noResourceSerial
        }}
        有待写入资源，因空间不足无法正常写入，青联系客服：
      </p>
      <p class="phone">40000000000</p>
      <div class="footer">
        <a-button class="ok-btn" type="primary" @click="close">确定</a-button>
      </div>
    </a-modal>
	</div>
</template>

<script>
export default {
  name: 'Home' 
}
</script>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import UserIndex from '@/views/user/index.vue';
import { requestHttp } from '@/api/main';
import { useRouter } from 'vue-router';
import BindDevice from '@/views/user/bind-device.vue';
import ReportForLoss from '@/views/user/report-for-loss.vue';
import { message } from 'ant-design-vue';
import { getCurrentWindow } from '@tauri-apps/api/window';
let window = getCurrentWindow();
const router = useRouter();
let server = ref('检测中');
let sns = ref([]);
let snsvalue = ref([]);
let hostname = ref('hostname');
let step1 = ref(false);
let step2 = ref(false);
let serverinit = ref(false);
let isAlive = ref(true);
let visible = ref(false);
let bindVisible = ref(false);
let machineId = ref('');
const reportVisible = ref(false);
const lossSerial = ref('');
const writeErrorvisible = ref(false);
const noResourceSerial = ref('');

let next = (i) => {
	visible.value = false;
	if (i) {
		bindVisible.value = true;
	}
};
const isNoresources = (resourceList) => {
	if(Array.isArray(resourceList) && resourceList.length > 0){
		const currentTime = Date.now();
		return resourceList.every((item) => {
			if(!item.end_time)return false;
			const et = Number(item.end_time);
			const st = Number(item.str_time);
			return et < currentTime || currentTime < st;
		});
	}
	return true;
}
let firstFetch = () => {
	requestHttp('controller.manager.readAll').then((res) => {
		sns.value = res.data;
		console.log('-----------firstFetch', res);
		if (res.data.length > 0) {
			step1.value = true;
		}
	});
};

let secndFetch = (ids) => {
	console.log(ids);
	requestHttp('controller.manager.readDataByids', { ids }).then((res) => {
		console.log('-----------secndFetch', res);
		step2.value = true;
		snsvalue.value = res.data;
	});
};
let getMachineId = () => {
	requestHttp('controller.manager.getMachineId').then((res) => {
		machineId.value = res.data;
	});
};
let dabangding = ref({});
onMounted(() => {
	console.log('Home mounted');
	step1.value = false;
	step2.value = false;
	/* ipc.removeAllListeners('timerJobProgress');
	ipc.on('timerJobProgress', (event, result) => {
		if (result.length > 0) {
			firstFetch();
		} else {
			step1.value = false;
		}
	}); */
	window.listen('timerJobProgress', ({payload}) => {
		if (payload.length > 0) {
			firstFetch();
		} else {
			step1.value = false;
		}
	});
	/* ipc.removeAllListeners('netlinstener');
	ipc.on('netlinstener', (event, result) => {
		isAlive.value = result;
	}); */

	window.listen('netlinstener', ({payload}) => {
		isAlive.value = payload;
	});
	getMachineId();
	
	requestHttp('controller.manager.test').then((res) => {
		//server 正常
		serverinit.value = true;
		server.value = 'http://localhost:20002';
	});
	requestHttp('controller.manager.hostname').then((res) => {
		//server 正常
		console.log('hostname', res);
		hostname.value = res.data;
	});


     window.listen('lock_error', (event) => {
		console.log('lock_error', event);
		message.error(event.payload);
	});

	window.listen('lock_warn', (event, result) => {
		writeErrorvisible.value = true;
		noResourceSerial.value = result;
		console.log('不足百分之10%,请联系管理员', event, result);
	}); 

	//lock.error
});

const toDetail = (url, queryKey) => {
	//检测到的设备没有生效中的就不可跳转
	// if (!bol && !sns.value.some((item) => item.status === 1)) return;
	if(queryKey) {
		router.push({
			path: url,
			query: {
				key: queryKey
			}
		});
	} else {
		router.push({ path: url });
	}
};

const toBind = (item) => {
	let v = { ...item, hostname: hostname.value, machineId: machineId.value };
	dabangding.value = v;
	visible.value = true;
};
const cancelLoss = (item) => {
	console.log('取消挂失', item);
	lossSerial.value = item.serial;
	reportVisible.value = true;
}
const updateSerial = (serial) => {
	lossSerial.value = serial;
}
const close = () => {
	writeErrorvisible.value = false;
}
</script>

<style lang="scss">
.index {
	width: 100%;
	height: calc(100vh - 50px);
	display: flex;
	flex-direction: column;
	align-items: center;

	.top {
		width: 100%;
		height: 376px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		.content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-left: -70px;
			margin-top: -25px;
			//height: 100%;
			.left-content {
				width: 383px;
			}
			.right-content {
				min-width: 300px;
				margin-left: 30px;
			}

			.single {
				color: #ffffff;
				position: relative;
				margin-top: 34px;

				.title {
					font-size: 16px;
				}

				.detail {
					display: flex;
					align-items: center;
					font-size: 12px;

					.icon-font {
						color: #ffffff;
						margin-right: 6px;
					}

					.ant-btn {
						display: inline-block;
						background: transparent;
						margin-left: 10px;
						border: 1px solid #ffaa00;
						// border: none;
						color: #ffaa00;
						font-size: 12px;
						padding: 3px 5px;
						width: 48px;
						height: 18px;
						text-align: center;
						line-height: 0;
					}
					.borderWhite {
						border: 1px solid white;
						color: white;
					}
				}

				span {
					font-size: 12px;

					.icon-font {
						color: #ffffff;
						margin-right: 6px;
					}
				}
			}

			.single:nth-of-type(1) {
				margin-top: 0;
			}

			.single:before {
				content: '';
				position: absolute;
				left: -32px;
				top: 10px;
				width: 10px;
				height: 10px;
				border-radius: 100%;
				background: #51df81;
				z-index: 10;
				display: flex;
			}

			.single:nth-of-type(1):after {
				content: '';
				position: absolute;
				left: -28px;
				top: 30px;
				width: 1px;
				height: 100%;
				border-radius: 100%;
				background: #51df81;
				z-index: 10;
				display: flex;
			}

			// .single:nth-of-type(2):after {
			// 	content: '';
			// 	position: absolute;
			// 	left: -28px;
			// 	top: 30px;
			// 	width: 1px;
			// 	height: 100%;
			// 	border-radius: 100%;
			// 	background: #51df81;
			// 	z-index: 10;
			// 	display: flex;
			// }

			.error {
				.title {
					display: flex;
					color: #ffaa00;
					font-size: 16px;

					.icon-font {
						font-size: 12px;
						margin-left: 6px;
					}
				}

				span {
					color: #ffaa00;
				}
			}

			.error:before {
				content: '';
				position: absolute;
				left: -32px;
				top: 10px;
				width: 10px;
				height: 10px;
				border-radius: 100%;
				background: #20d5fe;
				z-index: 10;
				display: flex;
				box-shadow: 0 0 14px #20d5fe;
			}
		}
	}
	.bottom-line {
		display: flex;
		width: 100%;
		.name {
			font-size: 11px;
			color: #4dffff;
			width: 20%;
			line-height: 50px;
   		padding-left: 30px;
		}
	}

	.bottom {
		width: 100%;
		height: 230px;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		// justify-content: space-around;
		// padding: 0 160px;
		background: #ffffff;

		.single {
			display: flex;
			flex-direction: column;
			align-items: center;

			span {
				font-size: 15px;
				color: #333333;
			}
		}
		.noClick {
			// opacity: 0.5 !important; 
		}
	}
}

.textColor {
	color: #ffaa00;
}
.status-show {
	display: inline-block;
	padding: 0px 5px;
	border-radius: 2px;
	text-align: center;
	color: #fff !important;
	border: 1px solid;
	font-size: 10px !important;
	margin-left: 8px;
	&.success {
		background-color: #63b945;
	}
	&.warn {
		background-color: #ffaa00;
	}
	&.cancel {
		cursor: pointer;
	}
}
.scroll-container {
	width: 80%;
	padding-left: 20px;
  height: 50px; /* 容器高度 */
  overflow: hidden;
  position: relative;
  white-space: nowrap;
	color: #fff;
	cursor: pointer;
}

.scrolling-text {
  position: absolute;
  animation: scroll 10s linear infinite;
  padding: 15px 0;
}
@keyframes scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
